<template>
  <div class="wallet-recharge">
    <titleLine title="钱包充值"></titleLine>
    <el-card class="money-total" shadow="never">
      <div style="font-weight: normal; font-size: 14px">
        总钱包余额({{ selectDictLabel(bus_currency_type, curCoinType) }})
      </div>
      <div style="margin-top: 10px">
        <el-statistic title="" :value="outputValue" />
      </div>
    </el-card>
    <el-card class="recharge-card" shadow="never">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="钱包充值" name="recharge">
          <rechargeView></rechargeView>
        </el-tab-pane>
        <el-tab-pane label="钱包充值记录" name="record"> </el-tab-pane>
      </el-tabs>
      <rechargeRecord v-if="activeName === 'record'" />
    </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import titleLine from "@/components/Title/title-line.vue";
import { useTransition } from "@vueuse/core";
import rechargeView from "./components/recharge.vue";
import rechargeRecord from "./components/recharge-record.vue";
import { getUserInfo } from "@/api/login";
import { selectDictLabel } from "@/utils/ruoyi.js";

const { proxy } = getCurrentInstance();
const { bus_currency_type } = proxy.useDict("bus_currency_type");

const activeName = ref("recharge");
const totalBalance = ref(0);
const curCoinType = ref("");
const outputValue = useTransition(totalBalance, {
  duration: 1500,
});
// totalBalance.value = 172000;

onMounted(() => {
  getUserInfo().then((res) => {
    totalBalance.value = res.data.accountBalance;
    curCoinType.value = res.data.currencyType;
  });
});
</script>
<style lang="scss">
.wallet-recharge {
  .money-total {
    border-top: #dcdfe6 solid 1px;
    font-size: 16px;
    margin: 16px;
    color: #000;
    font-weight: 600;
  }
  .recharge-card {
    margin: 0 16px;
  }
}
</style>
